/*
***
* This is a stylesheet file for the Contact Form Page
***
* Here we have all the important styles for the elements of the page.
***
* Media Queries are in separate file
***
*/
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CSS TABLE OF CONTENTS
-.- - Imports
-.- - Contact Form
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* -.- - Imports */
@import "main.css";

/* -.- - Contact Form */
/* Contact Intro Message */
#contact-message {
    margin-top: 40px;
    margin-bottom: 40px;
}

#contact-message h2 {
    padding: 10px;
}


#role {
    text-align: center;
    color: teal;
    font-weight: bold;
    margin-left: 15px;
    border-radius: 8%;
    border: solid 2px teal;
}

#submit-button {
    margin: 30px 0;
}

/* Countries */

#countries p {
    margin: 0;
    padding: 0;
    direction: ltr;
}

/* Contact Afterword */
#contact-afterword {
    margin-top: 70px;
    margin-bottom: 70px;
}

/* Required */
.required {
    margin-bottom: 20px;
}

.form-control,
.input-group>.form-control {
    /* width: 470px; */
    width: 450px;
}

/* Role */
.role {
    margin-left: 15px;
}

/* Help */
.help {
    padding-left: 15px;
}

/* For the input type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Terms and Conditions */
#terms {
    position: absolute;
    left: -9999px;
}

#terms+label {
    position: relative;
    padding-left: 2rem;
}

#terms+label::before,
#terms+label::after {
    content: '';
    position: absolute;
}

#terms+label::before {
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    border: 2px solid #444;
}


#terms:checked+label::after {
    left: 6px;
    top: 7px;
    width: 6px;
    height: 14px;
    border-bottom: 2px solid #009a93;
    border-right: 2px solid #009a93;
    transform: rotate(45deg);
}

#submit-button:disabled {
    background: hsl(0, 7%, 20%);
    color: rgb(211, 208, 208);
    cursor: not-allowed;
}